<template>
	<view>
		<!-- 头部 -->
		<view class="header">
			<text class="bt">借贷</text>
			<input class="search" type="text" value="" placeholder="搜索相关信息" />
			<image class="news" src="/static/borrow/news.png" mode=""></image>
		</view>
		<view class="main">
			<!-- 可借额度栏 -->
			<view class="quota">
				<view class="">
					<text class="highest_quota">最高可借额度(元)</text>
				</view>
				<view style="margin-top: 24rpx;margin-bottom: 42rpx;">
					<text class="highest_num">200,000,00</text>
				</view>
				<view class="">
					<text class="rate">审批便捷 | 年综合费率最低可至7.2%</text>
				</view>
				<view style="margin-top: 40rpx;" class="">
					<button type="" class="limit_button">同意协议并领取</button>
					<view class="open">开通率最高80元免费</view>
				</view>
				<view class="http">
					同意<navigator url="">翔瑞借贷协议及信息授权</navigator>
				</view>
				<view class="authentication">
					<view class="">
						<view>三步</view>
						<view>领取</view>
					</view>
					<view class="flex left">
						<view class="ball">1</view>
						<text>实名验证</text>
					</view>
					<view class="left next">····></view>
					<view class="flex left">
						<view class="ball">2</view>
						<text>银行卡验证</text>
					</view>
					<view class="left next">····></view>
					<view class="flex left">
						<view class="ball">3</view>
						<text>信用评估</text>
					</view>
				</view>
			</view>
			<!-- 标题栏 -->
			<view class="title">
				<view class="title_view" v-for="item in title" :key="item.id">
					<image class="title_img" :src="item.img" mode=""></image>
					<view class="">
						{{item.text}}
					</view>
				</view>
			</view>

			<!-- 新人专享 -->
			<view class="novice">
				<view class="xxx"></view>
				<text class="title_one">新人专享礼</text>
			</view>
			<view class="novice_main">
				<scroll-view scroll-x="true" class="scroll-view-content">
					<view class="volume" v-for="item in volume" :key="item.id">
						<view class="volume_flex">
							<view class="">
								<text style="font-size: 20rpx;">{{item.one}}</text>
							</view>
							<view style="font-size: 44rpx;margin-left: 8rpx;">
								{{item.two}}
							</view>
							<view class="">
								{{item.three}}
							</view>
							<view class="hr">

							</view>
							<view style="margin-left: 30rpx;">
								<view style="font-size: 26rpx;">{{item.four}}</view>
								<view style="font-size: 22rpx;">{{item.five}}</view>
							</view>
							<navigator class="volume_but">
								{{item.six}}
							</navigator>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 省心借钱 -->
			<view class="novice">
				<view class="xxx"></view>
				<text class="title_one">省心借钱</text>
				<text style="font-size: 20rpx;color: #cccccc;margin-left: 24rpx;">借现金&nbsp;&nbsp;更懂你</text>
			</view>
			<view class="upgrade">
				<view class="upgrade_left">
					<view class="title_one">
						升级贷
					</view>
					<view class="describe">
						<view class="border">
							纯信用
						</view>
						<view class="border">
							额度循环
						</view>
						<view class="border">
							随借随还
						</view>
					</view>
					<view style="margin-top: 30rpx;">
						<text style="font-size: 22rpx;color: #cccccc;">最高可借额度 (元)</text>
						<text class="describe_num">300,000.00</text>
					</view>
				</view>
				<view class="describe_btn">
					去开通
				</view>
			</view>
			<view class="upgrade">
				<view class="upgrade_left">
					<view>
						<text class="title_one">省心借</text>
						<text style="font-size: 22rpx;color: #cccccc;margin-left: 10rpx;">本服务由祥瑞消费金融提供</text>
					</view>
					<view class="describe">
						<view class="border">
							日息低至万三
						</view>
						<view class="border">
							门槛低到账快
						</view>
					</view>
					<view style="margin-top: 30rpx;">
						<text style="font-size: 22rpx;color: #cccccc;">最高可借额度 (元)</text>
						<text class="describe_num">200,000.00</text>
					</view>
				</view>
				<view class="describe_btn">
					去开通
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: [{
						id: 1,
						text: '抢疯了',
						img: '../../static/borrow/title01.png'
					},
					{
						id: 2,
						text: '30天免息',
						img: '../../static/borrow/title02.png'
					},
					{
						id: 3,
						text: '做任务',
						img: '../../static/borrow/title03.png'
					},
					{
						id: 4,
						text: '兑好礼',
						img: '../../static/borrow/title04.png'
					},
					{
						id: 5,
						text: '赚奖励',
						img: '../../static/borrow/title05.png'
					},
				],
				volume: [{
						id: 1,
						one: '最\n高',
						two: '90',
						three: '元',
						four: '新人免息券',
						five: '祥瑞借首次借款可用',
						six: '获取额度'
					},
					{
						id: 2,
						one: '最\n高',
						two: '80',
						three: '元',
						four: '邀请折扣券',
						five: '祥瑞借邀请新人可用',
						six: '获取额度'
					},
				],
			}
		},
		methods: {

		}
	}
</script>

<style>
	page {
		background-color: #3476F1;
	}

	.header {
		width: 100%;
		padding-top: 24rpx;
		box-sizing: border-box;
		display: flex;
		/* #ifndef MP-WEIXIN */
		padding-top: 80rpx;
		/* #endif */
	}

	.bt {
		font-size: 38rpx;
		font-weight: bold;
		color: white;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}

	.search {
		height: 60rpx;
		width: 70%;
		border-radius: 50rpx;
		background-color: white;
		background-image: url(../../static/borrow/search.png);
		background-repeat: no-repeat;
		background-size: 30rpx;
		padding-left: 68rpx;
		box-sizing: border-box;
		background-position: 24rpx 15rpx;
	}

	.news {
		width: 50rpx;
		height: 50rpx;
		margin-left: 24rpx;
		margin-top: 5rpx;
	}

	.main {
		width: 100%;
		background-color: white;
		border-radius: 50rpx 50rpx 0 0;
		margin-top: 140rpx;
		padding-bottom: 40rpx;
	}

	.quota {
		width: 702rpx;
		padding: 36rpx 24rpx;
		background-color: white;
		margin: auto;
		text-align: center;
		position: relative;
		top: -100rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		box-shadow: 0rpx 0rpx 10rpx 4rpx #dddddd;
	}

	.highest_quota {
		color: #666666;
		font-size: 24rpx;
	}

	.highest_num {
		font-size: ;
		color: #333333;
		font-size: 44rpx;
		font-weight: bold;
	}

	.rate {
		font-size: 24rpx;
		color: #999999;

	}

	.limit_button {
		height: 88rpx;
		width: 86%;
		border-radius: 44rpx;
		background-color: #3476F1;
		font-size: 32rpx;
		color: white;
		line-height: 88rpx;
	}

	.open {
		background-image: url(../../static/borrow/open.png);
		height: 52rpx;
		width: 210rpx;
		position: relative;
		left: 310rpx;
		top: -115rpx;
		padding: 0 10rpx;
		font-size: 20rpx;
		background-size: 100% 53rpx;
		color: white;
		padding-top: 8rpx;
		box-sizing: border-box;
		text-align: center;
	}

	navigator {
		color: #007AFF;
	}

	.http {
		display: flex;
		width: 100%;
		justify-content: center;
		margin-top: -24rpx;
		color: #999999;
		font-size: 20rpx;
	}

	.authentication {
		width: 654rpx;
		margin: auto;
		background-color: #EAF1FE;
		height: 64rpx;
		display: flex;
		align-items: center;
		font-size: 22rpx;
		margin-top: 24rpx;
		justify-content: space-evenly;
		padding: 24rpx 24rpx;
		box-sizing: border-box;
	}

	.flex {
		display: flex;
	}

	.ball {
		width: 30rpx;
		height: 30rpx;
		background-color: white;
		border-radius: 50%;
		line-height: 30rpx;
		text-align: center;
		margin-right: 12rpx;
	}

	.left {
		margin-left: 12rpx;
	}

	.next {
		color: #cccccc;
	}

	.title {
		width: 702rpx;
		display: flex;
		justify-content: space-between;
		margin: auto;
		margin-top: -60rpx;
	}

	.title_view {
		text-align: center;
		color: #666666;
	}

	.title_img {
		width: 88rpx;
		height: 88rpx;
	}

	.novice {
		margin-top: 24rpx;
		margin-left: 24rpx;
		display: flex;
		align-items: flex-end;
	}

	.xxx {
		width: 10rpx;
		height: 36rpx;
		background-color: #3476F1;
		align-items: center;
		border-radius: 5rpx;
	}

	.title_one {
		margin-left: 12rpx;
		font-size: 32rpx;
		color: balck;
		font-weight: bold;
	}

	.novice_main {
		margin-top: 24rpx;
		width: 100%;
		overflow: auto;
	}

	.volume {
		background-image: url(../../static/borrow/rectangle.png);
		height: 156rpx;
		width: 646rpx;
		background-size: 100% 156rpx;
		color: white;
		margin-left: 24rpx;
		display: inline-block;
		overflow: hidden;
	}

	.scroll-view-content {
		white-space: nowrap;
	}

	.volume_flex {
		display: flex;
		margin-left: 30rpx;
		height: 106rpx;
		align-items: flex-end;
	}

	.hr {
		height: 140rpx;
		width: 1rpx;
		border-right: 1rpx dashed #dddddd;
		margin-left: 50rpx;
		margin-top: 3rpx;
		position: relative;
		top: 44rpx;
	}

	.volume_but {
		width: 168rpx;
		height: 48rpx;
		background-color: white;
		border-radius: 30rpx;
		line-height: 48rpx;
		text-align: center;
		margin-left: 36rpx;
		color: #E7C998;
	}

	.upgrade {
		width: 702rpx;
		margin: auto;
		margin-top: 24rpx;
		padding: 24rpx;
		box-sizing: border-box;
		box-shadow: 0rpx 0rpx 5rpx 4rpx #dddddd;
		border-radius: 15rpx;
		display: flex;
	}

	.describe {
		display: flex;
		margin-top: 24rpx;
	}

	.border {
		padding: 6rpx 12rpx;
		border: 1rpx solid #007AFF;
		color: #007AFF;
		border-radius: 8rpx;
		margin-right: 20rpx;
		font-size: 18rpx;
	}
	.describe_num{
		color: red;
		font-size: 34rpx;
		font-weight: bold;
		margin-left: 30rpx;
	}
	.describe_btn{
		width: 204rpx;
		height: 74rpx;
		background-color: #007AFF;
		border-radius: 50rpx;
		color: white;
		line-height: 74rpx;
		text-align: center;
		font-size: 28rpx;
		margin-top: 60rpx;
		margin-left: 80rpx;
	}
	.upgrade_left{
		width: 70%;
	}
</style>
